<template>
  <div class="current-product-info">
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
    </div>

    <div v-else-if="product" class="product-card">
      <!-- Product Name -->
      <div class="product-header">
        <div class="product-name">
          <Icon icon="mdi:shield-check" class="product-icon" />
          <span>{{ $t('stakingProduct.title') }}</span>
        </div>
        <div class="product-badge" @click="showTierLevels">
          <Icon icon="mdi:star" class="badge-icon" />
          <span>{{ $t('stakingProduct.standard') }}</span>
        </div>
      </div>

      <!-- 等级表对话框 -->
      <TierLevelsDialog
        v-model="tierDialogVisible"
        :current-tier="currentTier"
        @tier-changed="handleTierChanged"
      />

      <!-- Product Details Grid -->
      <div class="product-details">
        <!-- Annual Yield -->
        <div class="detail-item highlight">
          <div class="detail-label">
            <Icon icon="mdi:chart-line" class="detail-icon" />
            <span>{{ $t('stakingProduct.annualYield') }}</span>
          </div>
          <div class="detail-value annual">
            {{ formatPercent(product.fixedApr) }}
          </div>
        </div>

        <!-- Daily Rate -->
        <div class="detail-item">
          <div class="detail-label">
            <Icon icon="mdi:calendar-today" class="detail-icon" />
            <span>{{ $t('stakingProduct.dailyRate') }}</span>
          </div>
          <div class="detail-value">
            {{ formatPercent(product.dailyRewardRate) }}
          </div>
        </div>

        <!-- Minimum Investment -->
        <div class="detail-item">
          <div class="detail-label">
            <Icon icon="mdi:cash-multiple" class="detail-icon" />
            <span>{{ $t('stakingProduct.minInvestment') }}</span>
          </div>
          <div class="detail-value">
            {{ formatAmount(product.minStakeAmount) }} NEAR
          </div>
        </div>

        <!-- Investment Period -->
        <div class="detail-item">
          <div class="detail-label">
            <Icon icon="mdi:clock-outline" class="detail-icon" />
            <span>{{ $t('stakingProduct.investmentPeriod') }}</span>
          </div>
          <div class="detail-value">
            {{ product.stakingPeriodDays ? product.stakingPeriodDays + ' ' + $t('stakingProduct.days') : $t('stakingProduct.flexible') }}
          </div>
        </div>
      </div>
    </div>

    <div v-else class="no-product">
      <Icon icon="mdi:alert-circle-outline" class="alert-icon" />
      <p>{{ $t('stakingProduct.noProduct') }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Icon } from '@iconify/vue'
import { api } from '@/utils/request'
import { eventBus, Events } from '@/utils/eventBus'
import TierLevelsDialog from './TierLevelsDialog.vue'

interface StakingProduct {
  id: number
  name: string
  symbol: string
  iconUrl?: string
  dailyRewardRate: number
  fixedApr: number
  minStakeAmount: number
  maxStakeAmount?: number
  stakingPeriodDays?: number
  description?: string
  isActive: boolean
}

const loading = ref(true)
const product = ref<StakingProduct | null>(null)
const tierDialogVisible = ref(false)
const currentTier = ref('ENTRY')

const loadProduct = async () => {
  try {
    loading.value = true
    const response = await api.get('/api/staking/product')
    product.value = response.data

    // 同时获取用户当前等级
    try {
      const tierRes = await api.get('/api/tiers/my-tier')
      currentTier.value = tierRes.data.currentTier
    } catch (error) {
      console.error('Failed to load user tier:', error)
    }
  } catch (error) {
    console.error('Failed to load staking product:', error)
  } finally {
    loading.value = false
  }
}

const formatPercent = (value: number): string => {
  return (value * 100).toFixed(2) + '%'
}

const formatAmount = (value: number): string => {
  return new Intl.NumberFormat('en-US', {
    minimumFractionDigits: 0,
    maximumFractionDigits: 2
  }).format(value)
}

const showTierLevels = () => {
  tierDialogVisible.value = true
}

const handleTierChanged = async () => {
  // 等级变更后重新加载数据并通知其他组件刷新
  await loadProduct()
  eventBus.emit(Events.REFRESH_STAKING_DATA)
}

onMounted(() => {
  loadProduct()
})
</script>

<style scoped lang="scss">
.current-product-info {
  margin-top: 48px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;

  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.product-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
  color: white;
  max-width: 900px;
  margin: 0 auto;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  .product-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;

    .product-icon {
      width: 32px;
      height: 32px;
      color: #fbbf24;
    }
  }

  .product-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.05);
    }

    .badge-icon {
      width: 16px;
      height: 16px;
      color: #fbbf24;
    }
  }
}

.product-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.detail-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
  }

  &.highlight {
    background: rgba(251, 191, 36, 0.2);
    border: 2px solid rgba(251, 191, 36, 0.5);
  }

  .detail-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 12px;

    .detail-icon {
      width: 18px;
      height: 18px;
    }
  }

  .detail-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;

    &.annual {
      font-size: 2rem;
      color: #fbbf24;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  }
}

.no-product {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;

  .alert-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }

  p {
    font-size: 1.125rem;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .current-product-info {
    margin-top: 32px;
  }

  .product-card {
    padding: 24px;
  }

  .product-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    .product-name {
      font-size: 1.375rem;
    }
  }

  .product-details {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .detail-item {
    padding: 16px;

    .detail-value {
      font-size: 1.25rem;

      &.annual {
        font-size: 1.75rem;
      }
    }
  }
}
</style>
